<template>
  <transition name="animation" appear>
    <div class="classify-container">
      <div class="classify-header" :style="headerStyle">
        <i class="iconfont icondayuhao icon" @click="backPrev"></i>
        分类
        <i class="iconfont iconsearch icon"></i>
      </div>

      <div class="classify-content">
        <scroll class="list-navbar" :data="navbars" ref="navbarScroll">
          <ul class="navbar-wrap">
            <li
              class="navbar-item"
              v-for="(text, index) of navbars"
              :key="text"
              :class="{ actived: index === navBarActive }"
              ref="navbar"
              @click="hadleNavbarClick(index)"
            >
              <span class="navbar-item-text">{{ text }}</span>
            </li>
          </ul>
        </scroll>
        <scroll
          class="list-product"
          ref="productScroll"
          :listenScroll="true"
          :isThrottle="true"
          :throttleDelay="100"
          :probeType="3"
          @scroll="handleProductScroll"
        >
          <ul class="product-wrap">
            <li
              class="product-item"
              v-for="(product, index) of products"
              :key="index"
              ref="product"
            >
              <template v-for="views of product.category_list">
                <cells-auto-fill
                  v-if="views.view_type === 'cells_auto_fill'"
                  :views="views"
                ></cells-auto-fill>
                <div
                  v-else-if="views.view_type === 'category_title'"
                  class="category_title"
                >
                  <span>{{ views.body.category_name }}</span>
                </div>
                <div
                  v-else-if="views.view_type === 'category_group'"
                  class="category_group"
                >
                  <a class="view-box" v-for="(view, index) of views.body.items">
                    <div class="img">
                      <img v-lazy="addHttps(view.img_url)" class="big" />
                    </div>
                    <div class="name">{{ view.product_name }}</div>
                  </a>
                </div>
              </template>
            </li>
          </ul>
        </scroll>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import classifyData from 'assets/json/classify'
import Scroll from 'common/scroll/scroll'
import CellsAutoFill from 'common/cells-auto-fill/cells-auto-fill'
import { homeMixin, headerStyleMixin } from 'assets/js/mixin'

let { data: products } = classifyData

export default {
  mixins: [homeMixin, headerStyleMixin],
  data() {
    return {
      products,
      navbars: products.map(views => views.category_name),
      navBarActive: 0
    }
  },
  mounted() {
    this.getProductsHeight()
  },
  methods: {
    backPrev() {
      this.$router.back()
    },
    getProductsHeight() {
      let heightArr = []
      let height = 0
      heightArr.push(height)
      this.$refs.product.forEach(item => {
        height += item.offsetHeight
        heightArr.push(height)
      })
      this.productsHeight = heightArr
    },
    handleProductScroll(pos) {
      let scrollY = pos.y * -1
      let heightArr = this.productsHeight
      let length = this.productsHeight.length

      for (let i = 0; i < length; i++) {
        if (heightArr[i] < scrollY && scrollY < heightArr[i + 1]) {
          if (!this.moveAnimate) {
            this.navBarActive = i
          }
          break
        }
      }
    },
    moveNavBarActive(index) {
      let elementY = this.$refs.navbar[index].getBoundingClientRect().y
      let PosY =
        document.documentElement.scrollHeight / 2 -
        this.$refs.navbar[0].clientHeight / 2
      let moveY = elementY - PosY

      let navbarScroll = this.$refs.navbarScroll

      let nextY = navbarScroll.scroll.y - moveY
      nextY = Math.min(
        navbarScroll.scroll.minScrollY,
        Math.max(navbarScroll.scroll.maxScrollY, nextY)
      )
      // console.log(posY)

      this.$refs.navbarScroll.scrollTo(0, nextY, 300)
    },
    hadleNavbarClick(index) {
      if (this.moveAnimate) {
        return
      }
      this.navBarActive = index

      this.moveAnimate = true

      // this.moveNavBarActive(index)

      this.$refs.productScroll.scroll.scrollToElement(
        this.$refs.product[index],
        300
      )

      setTimeout(() => {
        this.moveAnimate = false
      }, 350)
    }
  },
  watch: {
    navBarActive(newVal, oldValue) {
      if (newVal === oldValue) {
        return
      }
      this.moveNavBarActive(newVal)
    }
  },
  components: {
    Scroll,
    CellsAutoFill
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
@import '~assets/stylus/mixin';

.animation-enter-active, .animation-leave-active {
  transition: 0.3s;

  .classify-header {
    transition: all 0.3s ease;
  }

  .classify-content {
    transition: none;
  }
}

.animation-enter, .animation-leave-to {
  .classify-header {
    transform: translate3d(0, -100%, 0);
  }
}

.animation-leave-to {
  .classify-content {
    opacity: 0;
    height: 0;
    display: none !important;
    color: #fff;
    transform: translate3d(-100%, -100%, 0);
  }
}

.classify-container {
  .classify-header {
    z-index: 101;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    color: rgb(102, 102, 102);
    font-size: 0.3rem;
    no-wrap();
    background-color: rgb(242, 242, 242);

    .icondayuhao {
      display: inline-block;
      transform: rotate(180deg);
    }

    .icon {
      margin: 0 0.2rem;
      display: inline-block;
      text-align: center;
      font-size: 0.4rem;
      width: 0.6rem;
      height: 50px;
      line-height: 50px;
    }
  }

  .classify-content {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    display: flex;

    .list-navbar {
      flex: 0 0 1.52rem;
      width: 1.52rem;
      height: 100%;
      border-right: 1px solid #efefef;
      overflow: hidden;

      .navbar-wrap {
        padding: 0.2rem 0;
        display: flex;
        flex-direction: column;

        .navbar-item {
          font-size: 0.34rem;
          height: 0.9rem;
          line-height: 0.9rem;
          text-align: center;
          transform: scale(0.76);

          .navbar-item-text {
            display: block;
            height: 0.9rem;
            overflow: hidden;
          }

          &.actived {
            transition: transform 0.3s;
            color: #fb7d34;
            transform: scale(1);
          }
        }
      }
    }

    .list-product {
      flex: 1;
      padding: 0 0.32rem;
      height: 100%;
      overflow: hidden;

      .product-item {
        .category_group {
          background: #fff;
          margin: -0.06rem 0 0;

          .view-box {
            display: inline-block;
            width: 33.333333333333336%;
            text-align: center;
            margin: 0.2rem 0 0.3rem;
            overflow: hidden;

            .img {
              position: relative;
              width: 1rem;
              height: 1rem;
              margin: 0 auto;
              background: #fff;
              overflow: hidden;

              .big {
                height: 100%;
                width: auto;
              }
            }

            .name {
              margin-top: 0.28rem;
              font-size: 0.23rem;
              color: rgba(0, 0, 0, 0.54);
              no-wrap();
            }
          }
        }

        .category_title {
          line-height: 1.28rem;
          background: #fff;
          font-size: 0.28rem;
          text-align: center;
          font-weight: 400;
          margin-top: 0.2rem;
          height: 1.28rem;
          line-height: 1.28rem;
          overflow: hidden;
          color: #5d5d5d;

          span {
            position: relative;

            &:before, &:after {
              content: '';
              position: absolute;
              top: 50%;
              left: 0;
              width: 0.4rem;
              border-top: 1px solid #e0e0e0;
              transform: translate3d(-150%, -50%, 0);
            }

            &:after {
              right: 0;
              left: auto;
              transform: translate3d(150%, -50%, 0);
            }
          }
        }

        &:last-child {
          min-height: calc(100vh - 102px);
        }
      }
    }
  }
}
</style>